<template>
  <div class="bind">
    <QQInfo/>
    <call-back-input ref="mobileInput"
                     v-model="form.mobile"
                     :rules="formRule.mobile"
                     icon="phone"
                     placeholder="请输入手机号"/>
    <call-back-input ref="codeInput"
                     v-model="form.code"
                     :rules="formRule.code"
                     icon="code"
                     placeholder="请输入验证码">
      <div :class="{disable: time}"
           class="code"
           @click="sendCodeClick">
        {{ time ? `${time}秒后重试` : '发送验证码' }}
      </div>
    </call-back-input>
    <div class="submit"
         @click="submit">立即提交
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import {bindMobile, sendCode} from '@/api/register'
import {formRule} from '@/assets/utils/validate'
import message from '@/components/library/Message/index'
import {useCommonStore} from '@/stores/common'
import {useUserStore} from '@/stores/user'
import type {UserInfo} from '@/types/user'
import CallBackInput from '@/views/login/callback/components/CallBackInput.vue'
import QQInfo from '@/views/login/callback/components/QQInfo.vue'
import type {Ref} from 'vue'
import {inject, onBeforeUnmount, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'


let route = useRoute()
let router = useRouter()
let store = useCommonStore()
let unionId = <Ref<string> | undefined>inject('unionId') ?? ref<string>('')

let form = ref({
  mobile: '',
  code: ''
})
let mobileInput = ref()
let codeInput = ref()

let time = ref<number>(0)
let timer: number | undefined = undefined

onBeforeUnmount(() => {
  clearInterval(timer)
})

function initInterval() {
  time.value = 60
  clearInterval(timer)
  timer = setInterval(() => {
    time.value--
    if (time.value <= 0) {
      time.value = 0
      clearInterval(timer)
    }
  }, 1000)
}

async function sendCodeClick() {
  if (!mobileInput.value.judge() || time.value !== 0) return
  let res: any = await sendCode(form.value.mobile)
  if (res.message) return message.error(res.message)
  message.success('发送成功')
  initInterval()
}

async function submit() {
  let judge = [mobileInput.value, codeInput.value]
  let judgeKey: boolean = true
  for (let item of judge)
    if (!item.judge())
      judgeKey = false
  if (!judgeKey) return

  let res: any = await bindMobile(form.value.code, form.value.mobile, unionId.value)
  if (res.message) return message.error(res.message)
  message.success('绑定成功')
  // 保存登录信息
  useUserStore().userInfo = <UserInfo>res.result
  await router.push(store.redirect || '/')
}
</script>

<style lang="less"
       scoped>
.bind {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0;

  > * ~ * {
    margin-top: 30px;
  }

  .code {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
    padding: 0 15px;
    color: #999999;

    &.disable {
      cursor: not-allowed;
    }
  }

  .submit {
    height: 50px;
    color: white;
    background-color: @xtxColor;
    cursor: pointer;
    width: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
  }
}
</style>